<template>
  <div>
    <p>App---</p>
    <p>{{ count }}</p>
    <!-- 方式一：在组件上自定义事件 -->
    <!-- <Child @update="update" /> -->
    <Child ref="Child" />
  </div>
</template>

<script>
// 自定义事件只有在组件实列或是vue的实列
// 谁需要修改数据就要绑定自定义事件
// 在谁那要将修改数据，就要触发事件
import Child from "./views/Child";
export default {
  name: "App",
  data() {
    return {
      count: 0,
    };
  },
  components: {
    Child,
  },
  mounted() {
    // 挂载的时候绑定事件
    console.log(this.$refs);
    // 拿到当前组件
    console.log(this.$refs.Child, "child");
    // 添加自定义事件，参数1时间名 2.回调函数要写在methods里
    this.$refs.Child.$on("add", this.update);
  },
  beforeDestroy() {
    // 解绑自定义事件
    this.$refs.Child.$off("add", this.update);
  },
  methods: {
    update() {
      this.count++;
    },
  },
};
</script>

<style>
</style>